<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vuejs</title>
<script src="./vue.js"></script>
</head>
<body>
	<div id="blog-posts-events-demo">
	  <div :style="{ fontSize: postFontSize + 'em' }">
	    <blog-post
	      v-for="post in posts"
	      v-bind:key="post.id"
	      v-bind:post="post"
	      v-on:enlarge-text="postFontSize += 0.1"
	    ></blog-post>
	  </div>
	</div>
<script>
	Vue.component('blog-post', {
	  props: ['post'],
	  template: `
	    <div class="blog-post">
	      <h3>{{ post.title }}</h3>
	      <button v-on:click="$emit('enlarge-text')">
	        Enlarge text
	      </button>
	      <div v-html="post.content"></div>
	    </div>
	  `
	})
	new Vue({
		el:"#blog-posts-events-demo",
		data: {
			posts: [
				{id:1, title:'My journey with Vue1', content:'cc'},
				{id:2, title:'Blogging with Vue2', content:'ddc'},
				{id:3, title:'Why Vue is so fun3', content:'ee'},
			],
		    postFontSize: 1
		}
	});
</script>
</body>